<!--子菜单-->
<template>
    <a-sub-menu :key="menuInfo.key" @titleClick="backfun">
        <template #icon>
            <MailOutlined />
        </template>
        <template #title>{{ menuInfo.title }}</template>
        <template v-for="item in menuInfo.children" :key="item.key">
            <template v-if="!item.children">
                <a-menu-item :key="item.key">
                    <template #icon>
                        <PieChartOutlined />
                    </template>
                    <router-link :to="{path:item.link}">
                        {{ item.title }}
                    </router-link>
                    
                </a-menu-item>
            </template>
            <template v-else>
                <sub-menu :menuInfo="item" :key="item.key" />
            </template>
        </template>
    </a-sub-menu>
</template>

<script lang="ts" setup>

import { MailOutlined, PieChartOutlined } from '@ant-design/icons-vue';
import { ref, toRefs, watch, onMounted, reactive } from 'vue'

const props = defineProps({
    menuInfo: {
        type: Object,
        default: () => ({}), 
    },
    title: {
        type: String,
        default: ''
    },
})

//点击回调函数
const backfun = function() {
    
}

</script>
<script lang="ts">
export default {
    name:'subMenu'
}
</script>
<style lang="less">


</style>